<!-- 注册 -->
<template>
  <div class="register-container">
    <div class="from">
      <PackFrom
        :inputArr="oneFromArr"
        :btn="butContent"
        :Errer="'请输入手机号'"
        v-if="whichPartRef === 1"
        @submit="switchStep"
        @input="synchronizationData"
      />
      <PackFrom
        :inputArr="twoFromArr"
        :btn="butContent"
        :Errer="'请完成信息的录入'"
        v-else-if="whichPartRef === 2"
        @submit="switchStep"
        @input="synchronizationData"
      />
      <div v-else-if="whichPartRef === 3" class="uploadAvatar">
        <p class="avatar-title">请选择头像(非必填)</p>
        <uploadAvatar @click="avatar" />
      </div>
      <button class="submit" v-if="whichPartRef === 3" @click="registers">
        注册
      </button>
      <button class="but" v-if="whichPartRef > 1" @click="PreviousStep">
        上一步
      </button>
    </div>
  </div>
</template>

<script setup>
import PackFrom from "./PackFrom.vue";
import { register } from "@/api/user.js";
import uploadAvatar from "@/components/uploadAvatar/index.vue";
import { ref } from "vue";
// 第一步
const oneFromArr = ref([
  {
    title: "手机号",
    phone: "",
    err: [
      {
        required: true,
        msg: "请输入手机号",
      },
      {
        regular:
          '^((13[0-9])|(14)|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\\d{8}$',
        msg: "手机号不符合规则",
      },
    ],
    corresponding: "phone",
    type: "text",
  },
]);
// 第二步
const twoFromArr = ref([
  {
    title: "学号",
    studentId: "",
    err: [
      {
        required: true,
        msg: "请输入学号",
      },
      {
        regular: '^\\d{9}$',
        msg: "学号必须是9位",
      },
    ],
    corresponding: "studentId",
    type: "text",
  },
  {
    title: "密码",
    loginPwd: "",
    err: [
      {
        required: true,
        msg: "请输入密码",
      },
      {
        regular: '^\\S{6,10}$',
        msg: "任意字符6-10位(不能有空格等)",
      },
    ],
    corresponding: "loginPwd",
    type: "password",
  },
  {
    title: "姓名",
    Nickname: "",
    err: [
      {
        required: true,
        msg: "请输入姓名",
      },
      {
        regular: '[\u4e00-\u9fa5]{2,16}',
        msg: "姓名不规范",
      },
    ],
    corresponding: "Nickname",
    type: "text",
  },
]);
// 第三步(头像)
const butContent = "下一步";
// 步骤数
const whichPartRef = ref(1);
// 下一步步骤
const data = ref({});
function switchStep(item) {
  if (Object.keys(item).length > 0) {
    data.value = { ...data.value, ...item };
    whichPartRef.value++;
    return;
  }
}
// 上一步
function PreviousStep() {
  if (Object.keys(data.value).includes("file")) {
    delete data.value.file;
  }
  console.log(data.value);
  whichPartRef.value--;
}
// 头像数据
function avatar(avatar) {
  data.value = { ...data.value, avatar };
}
const emit = defineEmits(["change"])
// 同步数据
function synchronizationData(data){
  if(data.length === oneFromArr.value.length){
    oneFromArr.value = data
  } else if(data.length === twoFromArr.value.length){
    twoFromArr.value = data
  }
}

// 注册
async function registers() {
  const res = await register(data.value);
  if (res.code === 0) {
    ElMessage({
      message: "注册成功",
      type: "success",
    });
    emit("change")
  }
}
</script>

<style scoped lang="less">
@import "@/styles/var.less";
.register-container {
  position: relative;
  width: 100%;
  height: 100%;
  .from {
    width: 80%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    .but {
      margin-top: 10px;
      width: 100%;
      height: 40px;
      letter-spacing: 30px;
      border: 0;
      background-color: @danger;
      color: @white;
      border-radius: 5px;
      cursor: pointer;
    }
    .submit {
      margin-top: 10px;
      width: 100%;
      height: 40px;
      letter-spacing: 30px;
      border: 0;
      background-color: @primary;
      color: @white;
      border-radius: 5px;
      cursor: pointer;
    }
    .uploadAvatar {
      text-align: center;
    }
    .avatar-title {
      margin-top: 10px;
      font-size: 20px;
    }
    .uploadAvatar-container {
      margin: 20px auto;
      width: 150px;
      height: 150px;
    }
  }
}
</style>